import React from 'react';
import { Button, Popconfirm, Space, Modal, Form, Input, Row, Col } from 'antd';
import { PlusOutlined, DeleteOutlined, FormOutlined } from '@ant-design/icons';
import TableCom from '../../../Component/tableCompoment/index';
import Cookie from 'js-cookie';
let time;
class menuManage extends React.Component {
  formRef = React.createRef();
  constructor(prop) {
    super(prop);
    this.state = {
      btnStyle: 'button-color-daybreak',
      tableData: [], //表格数据
      column: [
        {
          title: '部门编号',
          dataIndex: 'key',
          key: 'key',
        },
        {
          title: '部门名称',
          dataIndex: 'departmentName',
          key: 'departmentName',
        },
        {
          title: '创建时间',
          dataIndex: 'insertTime',
          key: 'insertTime',
        },
        {
          title: '操作',
          dataIndex: 'operation',
          render: (_, record) =>
            this.state.tableData.length >= 1 ? (
              <Space>
                <Popconfirm
                  cancelText="取消"
                  okText="确定"
                  title="确定删除此条数据吗?"
                  onConfirm={() => this.handleDelete(record.key)}
                >
                  <Button
                    icon={<DeleteOutlined />}
                    className={this.state.btnStyle + ' ' + 'button-noback'}
                  >
                    删除
                  </Button>
                </Popconfirm>
                <Button
                  onClick={this.handleEdit.bind(this, record)}
                  icon={<FormOutlined />}
                  className={this.state.btnStyle + ' ' + 'button-noback'}
                >
                  修改
                </Button>
              </Space>
            ) : null,
        },
      ], //表头
      top: 'none', //顶部是否有分页器及分页器位置
      bottom: 'bottomCenter', //底部是否有分页器及分页器位置
      visible: false, //modal框是否显示
      confirmLoading: false, //确定延时，异步回调
      Title: '', //modal标题
      layout: {
        //表单位置
        labelCol: { span: 4 },
        wrapperCol: { span: 16 },
      },
    };
  }
  // 删除数据
  handleDelete = val => {
    console.log(val);
    // val该条数据的key
    //这里写调用删除数据的接口
  };
  //修改数据
  handleEdit = (val, e) => {
    console.log(val);
    this.setState({
      Title: `修改${val.menuName}信息`,
      visible: true,
    });
  };
  //modal框确定
  handleOk = () => {
    console.log('确定');
    this.setState({
      visible: false,
    });
  };
  //modal取消
  handleCancel = () => {
    console.log('取消');
    this.setState({
      visible: false,
    });
  };
  //新增
  handleAdd = () => {
    this.setState({
      Title: `新增菜单`,
      visible: true,
    });
  };
  //搜索
  onFinish = val => {
    console.log(val);
    //val代表表单输入的值，在这里进行搜索
  };
  //重置
  onReset = () => {
    this.formRef.current.resetFields();
  };
  render() {
    const { Title, visible, confirmLoading, column, tableData, top, bottom, layout } = this.state;
    return (
      <>
        <div className="topSelect">
          <Form {...layout} ref={this.formRef} onFinish={this.onFinish}>
            <Row gutter={24}>
              <Col span="6">
                <Form.Item name="key" label="部门编号">
                  <Input />
                </Form.Item>
              </Col>
              <Col span="6">
                <Form.Item name="departmentName" label="部门名称">
                  <Input />
                </Form.Item>
              </Col>
              <Col span="6">
                <Form.Item>
                  <Button type="primary" htmlType="submit">
                    搜索
                  </Button>
                  <Button htmlType="button" onClick={this.onReset}>
                    重置
                  </Button>
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </div>
        <div className="topOperation">
          <Button type="primary" onClick={this.handleAdd} icon={<PlusOutlined />}>
            新增
          </Button>
        </div>
        <div className="tableCont">
          <TableCom
            tableColumns={column}
            tableData={tableData}
            top={top}
            bottom={bottom}
            isSelect={true}
          ></TableCom>
        </div>
        <Modal
          okText={'确定'}
          cancelText={'取消'}
          title={Title}
          visible={visible}
          onOk={this.handleOk}
          confirmLoading={confirmLoading}
          onCancel={this.handleCancel}
        >
          <p>显示modal</p>
        </Modal>
      </>
    );
  }
  componentDidMount() {
    let that = this;
    time = setInterval(function () {
      if (that.state.btnStyle !== Cookie.get('btnColor')) {
        that.setState({
          btnStyle: Cookie.get('btnColor'),
        });
      }
    }, 500);
    this.setState({
      btnStyle: Cookie.get('btnColor') || 'button-color-daybreak',
      tableData: [
        {
          key: 1,
          departmentName: '董事会',
          insertTime: '2021-2-23',
        },
        {
          key: 2,
          departmentName: '财务部',
          insertTime: '2021-2-23',
        },
      ],
    });
  }
  componentWillUnmount() {
    clearInterval(time);
  }
}
export default menuManage;
